<template>
	<div>
		<div class="orderInfo">
			<el-descriptions :column="3" border>
				<el-descriptions-item label="总金额">{{
					orderInfo?.totalAmount || '-'
				}}</el-descriptions-item>
				<el-descriptions-item label="优惠金额">{{
					orderInfo?.discountAmount || '-'
				}}</el-descriptions-item>
				<el-descriptions-item label="支付金额">{{
					orderInfo?.payAmount || '-'
				}}</el-descriptions-item>
			</el-descriptions>
			<el-descriptions :column="2" border>
				<el-descriptions-item label="订单号">{{
					orderInfo?.orderNumber
				}}</el-descriptions-item>
				<el-descriptions-item label="订单时间">{{
					orderInfo?.createTime
				}}</el-descriptions-item>
				<el-descriptions-item label="微信单号">{{
					orderInfo?.transactionId || '-'
				}}</el-descriptions-item>
				<el-descriptions-item label="支付状态">
					<el-tag :type="getStatusType(orderInfo?.status)">{{
						getStatusText(orderInfo?.status)
					}}</el-tag>
				</el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="product-table mt-4">
			<el-table :data="productDetailsInfo" border>
				<el-table-column
					prop="count"
					label="数量"
					width="100"
					align="center"
				></el-table-column>
				<el-table-column prop="price" label="价格" width="120" align="right">
					<template #default="scope"> ¥{{ scope.row.price }} </template>
				</el-table-column>
				<el-table-column prop="name" label="名称" min-width="180"></el-table-column>
				<el-table-column prop="brandName" label="品牌" width="120"></el-table-column>
				<el-table-column prop="seriesName" label="系列" width="120"></el-table-column>
				<el-table-column prop="modelNumber" label="型号" width="120"></el-table-column>
				<el-table-column prop="trainCount" label="视训次数" width="120"></el-table-column>
				<el-table-column prop="giftCount" label="赠送次数" width="120"></el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, watch } from 'vue';

const props = defineProps({
	productDetailsInfo: null,
	orderInfo: null
});
// 获取状态文本
const getStatusText = status => {
	switch (status) {
		case 0:
			return '待支付';
		case 1:
			return '已支付';
		case 2:
			return '已发货';
		case 3:
			return '已完成';
		case 4:
			return '已取消';
		default:
			return '-';
	}
};

// 获取状态对应的标签类型
const getStatusType = status => {
	switch (status) {
		case 0:
			return 'warning'; // 黄色
		case 1:
			return 'success'; // 绿色
		case 2:
			return 'info'; // 灰色
		case 3:
			return 'success'; // 绿色
		case 4:
			return 'danger'; // 红色
		default:
			return 'info';
	}
};
onMounted(() => {
	console.log('productDetails', props.productDetailsInfo);
	console.log('orderInfo', props.orderInfo);
});
</script>
<style scoped>
.orderInfo {
	margin-bottom: 20px;
}

.product-table {
	margin-top: 20px;
}

:deep(.el-descriptions) {
	margin-bottom: 0;
}

:deep(.el-descriptions__cell) {
	padding: 12px 20px;
}
</style>
